<template>
  <div class="container">
    <header class="header"> </header>
    <var-tabs-items v-model:active="active">
      <var-tab-item name="travelPlan">
        <div class="btn-wrap">
          <var-list finished-text="没有更多了" error-text="出错了出错了" :finished="finished" v-model:loading="loading" @load="load">
            <var-cell :key="item.id" v-for="item in dataList">
              <var-card
                :title="item.name"
                :subtitle="linkTypeMap[item.type]"
                :description="
                  item.type === linkTypeEnum.RUSTIC
                    ? item.introduce
                      ? '介绍：' + item.introduce
                      : ''
                    : item.rusticName
                      ? '乡村名称: ' + item.rusticName
                      : ''
                "
                :src="getFileHttpUrl(item.cover)"
                layout="column"
                @click="detailClick(item.targetId, item.type)"
              />
            </var-cell>
          </var-list>
        </div>
      </var-tab-item>
    </var-tabs-items>
  </div>
</template>

<script lang="ts" setup name="addListPage">
  import { useUserStore } from '@/store/modules/user';
  import { getFileHttpUrl } from '@/utils/urlUtils';
  import type { Dayjs } from 'dayjs';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { linkTypeEnum, linkTypeMap } from '@/enums/LinkTypeEnum';
  import { getLikeList } from '@/api/like';

  // const { locale } = useI18n();
  const router = useRouter();
  const active = ref('travelPlan');
  const list = ref([]);
  let current = 1;
  const loading = ref(false);
  const valueFormat = 'YYYY-MM-DD HH:mm';

  const userStore = useUserStore();

  const finished = ref(false);
  const dataList = ref<
    {
      targetId: number;
      id: number;
      name: string;
      introduce: string;
      cover: string;
      createTime: string;
      rusticName: string;
      type: number;
    }[]
  >([]);

  const getList = async () => {
    const res = await getLikeList({ current: current, size: 10 });

    if (res) {
      current = res.data.current + 1;
      if (res.data.total == 0) {
        finished.value = true;
        return;
      }
      setListData(res.data.current > 1 ? [...list.value, ...res.data.records] : (res.data.records as any[]));
      dataList.value = list.value.map(
        (item: {
          targetId: number;
          id: number;
          name: string;
          introduce: string;
          cover: string;
          createTime: string;
          rusticName: string;
          type: number;
        }) => ({
          targetId: item.targetId,
          id: item.id,
          name: item.name,
          introduce: item.introduce,
          cover: item.cover,
          createTime: item.createTime,
          rusticName: item.rusticName,
          type: item.type,
        }),
      );
      // 将映射后的新数据追加到 rusticList 中
      if (dataList.value.length == 0) {
        finished.value = true;
      }
      return res.data.record;
    }
  };
  const setListData = (data: any) => {
    list.value = data;
  };
  const load = () => {
    setTimeout(() => {
      getList();
      loading.value = false;
    }, 1000);
  };

  /**
   * 卡片点击跳转页面
   */
  const detailClick = (id: number, type: number) => {
    // 乡村
    if (type == linkTypeEnum.RUSTIC) {
      router.push({ path: '/rustic', query: { id: id } });
      return;
    }
    // 活动
    if (type == linkTypeEnum.ACTIVITY) {
      router.push({ path: '/eventActivity', query: { id: id } });
      return;
    }
    // 景点
    if (type == linkTypeEnum.ATTRACTIONS) {
      router.push({ path: '/attractions', query: { id: id } });
      return;
    }
    // 美食
    if (type == linkTypeEnum.FOOD) {
      router.push({ path: '/food', query: { id: id } });
      return;
    }
    // 旅游攻略
    if (type == linkTypeEnum.RUSTIC) {
      router.push({ path: '/travelPlanDetail', query: { id: id } });
      return;
    }
  };

  // const changeLang = (type) => {
  //   setLang(type);
  // };

  onMounted(() => {});
</script>
<style lang="scss">
  .container {
    .bubble-style {
      margin-top: 15px;
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 40px;
    background: #faf2d0;
    img {
      width: 90px;
      height: 90px;
    }
  }

  .intro-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 16px;
    width: 100%;
  }

  .supportList {
    margin: 0 16px;

    .nut-cell-group__title {
      margin-top: 30px;
    }
  }

  .btn-wrap {
    margin: 20px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .btn-confirm {
    @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
  }

  .tabs-example-icon {
    margin-bottom: 5px;
    width: 55px;
    height: 55px;
  }
  .tabs {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding:
      -5,
      -5;
    margin: 0;
    --color-primary: #f0f0f0;
    --color-on-primary: #4b7a74;
    --color-on-info: #000303;
    box-sizing: border-box;
  }
</style>
